<template>
	<view>
		<view class="fixed bg flex ct pb50 animated fadeInUp fastest" v-if="show">
			<view class="block">
				<view class="fz40 impact" style="letter-spacing: 3px;">
					{{timeStr}}
				</view>
				<view class="fz14 op8">
					最长可录{{duration}}秒
				</view>

				<view class="pt50 grid g3">
					
					<view class="flex ct"  >
						<view v-if="voicePath && !recording">
							<view class="text-center" v-if="playing" @tap="pause">
								<view class="icon-icon_play iconfont fz24"></view>
								停止
							</view>
							<view class="text-center" v-else @tap="play">
								<view class="icon-icon_play iconfont fz24"></view>
								播放
							</view>
						</view>
					</view>

					<!-- 录音按钮 -->
					<view class="father recorderBtn flex ct recording" v-if="recording" @tap="stop">
						<view class="fz90 iconfont icon-tingzhi main father z3"></view>
					</view>
					<view class="father recorderBtn flex ct" v-else @tap="start">
						<view class="fz90 sIcon-recorderFill main father z3"></view>
					</view>

					<view class="flex ct" @tap="complete">
						<view class="text-center" v-if="voicePath && !recording">
							<view class="sIcon-okFill fz24"></view>
							完成
						</view>
					</view>
					
				</view>

				<view class="fz14">
					{{statusStr}}
				</view>
				<view class="abs bottom pb30 op9" @tap="cancel">
					<view class="fz16 sIcon-closeFill"></view>
					取消
				</view>


			</view>
		</view>
	</view>
</template>


<script>
	var recorderManager = uni.getRecorderManager() ;
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = false ;
	var timer = null ;
	export default {
		name: "recorder",
		props: {
			show: {
				type: [Boolean],
				default: false
			},
			duration : {
				type: [Number], // 秒
				default: 600
			}
		},
		data() {
			return {
				recording : false ,
				playing : false ,
				voicePath : 'http://downsc.chinaz.net/Files/DownLoad/sound1/201906/11621.mp3' ,
				voiceData : {} ,
				startTime : 0 ,
				timeStr : "00:00"
			}
		},
		computed: {
			statusStr: function(e) {
				if (!this.recording && this.voicePath) {
					return "点击按钮重新录音" ;
				}
				if (!this.recording && !this.voicePath) {
					return "点击按钮开始录音" ;
				}
				if (this.recording) {
					return "录音中，点击按钮停止录音" ;
				}
			},
		},
		
		created() {
			recorderManager.onStop( (e) => {
				this.voiceData = e ;
				this.voicePath = e.tempFilePath;
				this.recording = false ;
				this.startTime = 0 ;
				clearInterval(timer);
				innerAudioContext.src = this.voicePath ;
			});
		},
		
		methods: {
			
			complete:function(e){
				this.$emit("complete", this.voiceData);
			},
			
			cancel : function(e){
				this.$emit("cancel", this.voiceData);
			},
			
			play:function(e){
				if (this.voicePath) {
					console.log(innerAudioContext.src);
					innerAudioContext.play();
					this.playing = true ;
				}
			},
			
			pause:function(e){
				innerAudioContext.stop();
				this.playing = false ;
			},
			
			stop:function(e){
				recorderManager.stop();
			},
			
			start : function(e){
				uni.authorize({
					scope:"scope.record",
					success : e => {
						console.log(e);
						if (e.errMsg == 'authorize:ok') {
							this.startRecording();
						}
					},
					fail: (err) => {
						if (err.errMsg && err.errMsg.indexOf('auth deny') > -1) { //授权拒绝
							this.openSetting();
						}
						console.log(err , "..");
					}
				});
			},
			
			startRecording:function(e){
				recorderManager.start({
					duration: this.duration * 1000 ,
					format : 'mp3' ,
					sampleRate : 44100,
					encodeBitRate : 320000
				});
				this.recording = true ;
				this.startTime = Date.now();
				timer = setInterval(e => {
					var mills = Date.now() - this.startTime ;
					this.timeStr = this.transTimeStr(mills);
				},1000);
			},
			
			transTimeStr:function(mills){
				console.log(mills);
				var leftTime = parseInt(mills/1000);
				var m = parseInt(leftTime/60%60);
				var s = parseInt(leftTime%60);
				return this.getFullStr(m) + ":" + this.getFullStr(s) ;
			},
			
			getFullStr : function (t) {
			    return  t < 10 ? "0" + t : t;
			},
			
			openSetting: function(e) {
				uni.showModal({
					title:'提示',
					content:'录音权限未打开，请打开录音权限继续录音~',
					confirmColor:'#3385ff',
					success : (e)=>{
						if (e.confirm) {
							uni.openSetting({
								success: (e) => {
									console.log("setting:" , e);
									if (e.authSetting['scope.record']) {
										this.startRecording();
									}else{
										uni.showToast({
											title: '录音权限未打开',
											icon : 'none'
										});
									}
								},
								fail: (err) => {
									console.log("settingerr:" , err);
								}
							})
						}
					}
				});
			},
			

		}

	}
</script>

<style lang="scss" scoped>
	.recorderBtn {
		width: 240upx;
		height: 240upx;
		position: relative;

		&:before,
		&:after {
			content: "";
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 50%;
			left: 50%;
			margin-top: -120upx;
			margin-left: -120upx;
			background-color: rgba(255, 255, 255, 0.1);
			-webkit-border-radius: 100%;
			-moz-border-radius: 100%;
			border-radius: 100%;
		}

		&:after {
			background-color: rgba(255, 255, 255, 0.2);
			width: 210upx;
			height: 210upx;
			margin-left: -105upx;
			margin-top: -105upx;
		}

		.fz90 {
			line-height: 240upx;
			background-color: #fff;
			-webkit-border-radius: 100%;
			-moz-border-radius: 100%;
			border-radius: 100%;
			width: 180upx;
			height: 180upx;
			font-size: 100upx;
			line-height: 180upx;
		}

		&.recording {
			&:before,
			&:after {
				animation: wave 2s infinite ease-in-out;
			}

			&:after {
				animation-delay: 0.5s;
			}
		}
	}

	@keyframes wave {
		0% {
			opacity: 1;
			transform: scale(0.8);
		}
		100% {
			opacity: 0.2;
			transform: scale(1.3);
		}
	}
</style>
